<template>
    <div class="hello">
      <div class="tool-bar" v-bind:class="{'tool-bar-fix':isFix}" :style="{width:width}">
        <div class="btn">
          <el-button type="success" @click="handlePublic">发布</el-button>
          <el-button type="warning" @click="handleDraft">草稿</el-button>
        </div>
      </div>
      <div class="blog-content">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="作者">
                <el-input v-model="form.author"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="时间">
                <el-date-picker
                  v-model="form.public"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="重要性">
                <el-rate
                  v-model="form.import"
                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                </el-rate>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="摘要">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.summary">
            </el-input>
          </el-form-item>
        </el-form>
        <textarea id="blogCreate" v-show="show"></textarea>
      </div>

    </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import 'tinymce/themes/modern/theme'
  import 'tinymce/plugins/advlist' // 这几条引入是因为我的导入不了，不知道为啥
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/paste'
  import 'tinymce/plugins/textcolor'

  export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
              isFix:false,
                show:true,
              width:"auto",
                form: {
                  title: '',
                  author: '',
                  import:3,
                  summary: '',
                  content:''
                }
            }
        },
        methods:{
          handleScroll() {
            let scrollHeight = window.scrollY;
            if (scrollHeight >= 50) {
              this.width = this.$el.getBoundingClientRect().width + 'px';
              this.isFix = true;
            } else {
              this.isFix = false;
              this.width = "auto";
            }
          },
          handlePublic () {
            this.form.content = tinymce.activeEditor.getContent();
            console.info(this.form)
          },
          handleDraft() {
            this.form.content = tinymce.activeEditor.getContent();
            console.info(this.form);
          }
        },
        mounted() {
          const _this = this
          const setting = {
            selector: '#blogCreate',
            skin_url: '/static/tinymce/js/tinymce/skins/lightgray',
            language_url: '/static/tinymce/js/tinymce/langs/zh_CN.js',
            language: 'zh_CN',
            height: 400
          }
          Object.assign(setting, _this.setting)
          tinymce.init(setting);
        },
        destroyed() {
          tinymce.get('blogCreate').destroy();
          window.removeEventListener('scroll', this.handleScroll);
        },ed () {
          window.addEventListener("scroll",this.handleScroll);
        }
    }
</script>
<style scoped>
  .tool-bar {
    height: 50px;
    background-color: #d0d0d0;
    vertical-align: middle;
    line-height: 50px;
    text-align: right;
  }
  .btn {
    padding-right: 45px;
  }
  .btn .el-button {
    padding:10px 20px;
  }
  .blog-content {
    margin: 40px 45px 20px 50px;
  }
  .tool-bar-fix {
    position: fixed;
    top:0px;
    z-index: 100;
  }
  .el-rate {
    padding-top:9px;
  }
</style>
